import './FrontTheme.scss'

import { useMemo } from 'react'
import { useEventEmitter } from 'ahooks'


import { Encrypt } from '../../Utils/IndexedDB'
import { FormTemplate } from '../../Utils/FormTemp'
import { FrontStyleFormTheme } from './FrontStyleForm'

const FrontTheme = ({ data: StyleData, ModalEvent }) => {
    const { Theme } = StyleData

    const init = JSON.parse(JSON.stringify(Theme))
    const FormEvent = useEventEmitter()
    const formTemplateProps = useMemo(() => ({
        columns: FrontStyleFormTheme,
        init,
        ModalEvent: FormEvent,
    }), [FrontStyleFormTheme, init, FormEvent])

    FormEvent.useSubscription(async val => {
        const { type, data } = val
        if (type === 'Added') {
            StyleData.Theme = data
            console.log('最终数据值', StyleData)
            console.log('保存json文件', await Encrypt(StyleData))
            ModalEvent.emit({ type: 'getStyle' })
            FormEvent.emit({ type: 'offLoading' })
        }
    })

    return (
        <div className='FrontTheme'>
            <FormTemplate name='Theme' {...formTemplateProps} />
        </div>
    )
}

export default FrontTheme